<!DOCTYPE html>
<html lang="en">

<!-- 
    从字节学到的
    1.CSP安全头-content-security-policy-report-only+report-uri 
    2.HSTS安全头：<meta http-equiv="strict-transport-security" content="max-age=86400  ">
    3.x-frame-options：不允许别人用iframe加载你的界面
    4.link的rel属性用dns-prefetch预加载
    5.用了CSP安全头但是没用他最常见的content-security-policy而是用x-xss-protection进行了替换。x-xss-protection: 1; mode=block对于CSP的好处是可以对那些暂时不支持CSP的浏览器进行保护。当检测到xss脚本的时候，页面会停止加载
    6.今日头条的官网用了descripton和keywords做seo
    7.script用了 crossorigin，nonce，integrity 做安全
-->

<head>
    <!-- 设置文档的编码为 utf-8 -->
    <meta charset="ISO-8859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 1.seo优化：搜索引擎有一些会搜索 content，使用逗号分隔，关键词，name不能变 -->
    <meta name="keywords" content="HTML5,css,js">
    <meta name="description" content="这是meta的测试">
    <!-- 允许抓取本页和跟踪链接，noindex和nofollow是不允许抓取链接和跟踪链接 -->
    <meta name="robots" content="index,follow">


    <!-- 
        viewport是移动端页面渲染的容器，手机浏览器把页面放在这个虚拟的窗口里面，通常这个viewport比实际宽度宽
        width可以给一个指定数值，但是会变得不好.可以指定最多能够缩放的比例 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=10.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 2.CSP安全策略示例 ，不能分成两行写，不然报错。这些东西都是字面意思。-->
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self';script-src  'unsafe-inline' ;style-src https://unpkg.com 'unsafe-inline' ; font-src https://unpkg.com">

    <!-- 像下面这样子设置了之后，只有在 script 标签内带有相同 nonce 值的脚本才能执行。 -->
    <!-- <script nonce="nonce-Ef" src="./hello.js"></script> -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-Ef'">
    <!--所有http变成https链接  -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <!-- 3.STS安全示例 -->
    <meta http-equiv="strict-transport-security" content="max-age=86400  ">
    <Meta http-equiv=”Window-target” Content=”_top”>
    
    <title>Meta头示例</title>
    <!-- 常用头设置 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="expires" Content="86400">


    <!-- 这是2秒后跳转，如果要2秒刷新一次我们把后面的url去掉就好了 -->
    <!-- <meta http-equiv="refresh" content="2 url='http://hi.baidu.com/tesalo/'"  /> -->

    <!-- 
        
        这里可以用来进行es6的测试
        Content-Security-Policy: script-src 'nonce-Ef';
        <script type="module" src="app.js" integrity="sha256"></script>
        <script nomodule src="classic-bundle.js"></script> 
    -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <style>
        body {
            word-wrap: break-word;
        }
    </style>
    水水水水水水
    <script>
        // 易错：1.get 请求不能有body
        // 2.第一次返回的结果是一个promise或者是respnse对象
        let datat = fetch("http://127.0.0.1:5501/docs/know/img/data.json", {
            method: 'GET',
            headers: {
                //   'Content-Type': 'application/json',
            },
            mode: "cors",
            credentials: "include",
            cache: "default"
        }).then(res => {
            let ceshi = res.json()
            ceshi.then((result) => {
                console.log(result)
            })
        })
    </script>
</body>

</html>